<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height:100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=1IMGhA8nTnmf6LMGCLcVQaBt9TDWxoGc"></script>
    
</head>
<body>

    <div id="allmap"></div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap");
        map.centerAndZoom("上海", 13);
        map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());//左上角，添加默认缩放平移控件
        var data_info = [];
        var data = [];
        // var data = [
        //     [0] => [
        //             'lng' => 121.452512,
        //             'lat' => 31.248279,
        //             'project' => '项目',
        //             'address' => '地址',
        //             'linkman' => '联系人',
        //             'tel' => '电话',
        //             'url' => '路径'
        //         ],
        //     [1] =>  [
        //             'lng' => 121.460848,
        //             'lat' => 31.256676,
        //             'project' => '项目2',
        //             'address' => '地址2',
        //             'linkman' => '联系人2',
        //             'tel' => '电话2',
        //             'url' => '路径2'
        //         ],
        // ];

        {volist name="data" id="row"}
        data.push({
            lng: '{$row.lng}',
            lat: '{$row.lat}',
            project: '{$row.title}',
            address: '{$row.detailAddress}',
            url:'{:url("view",["id"=>$row.id])}'
        })
        {/volist}

        for(var i=0;i<data.length;i++){
            data_info[i] = [data[i]['lng'],data[i]['lat'],"经销商："+data[i]['project']+'</br>'+"地址："+data[i]['address']+'</br>'+"<a href="+data[i]['url']+" target='_self'/>点击查看详情</a>"]
        }
        var opts = {
            width : 200,     // 信息窗口宽度
            height: 120,     // 信息窗口高度
            title : "" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
        };
        var myIcon = new BMap.Icon("__STATIC__/layout/img/1.png", new BMap.Size(32,32));
        for(var i=0;i<data_info.length;i++){
            var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon});  // 创建标注
            var content = data_info[i][2];
            map.addOverlay(marker);               // 将标注添加到地图中
            addClickHandler(content,marker);
        }
        function addClickHandler(content,marker){
            marker.addEventListener("click",function(e){
                openInfo(content,e)}
            );
        }
        function openInfo(content,e){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
    </script>
</body>
</html>
   